<template>
  <div class="wrap">
    <header>{{regheader}}</header>
    <flow>
      <flow-state state="1"
                  is-done
                  title="核对">
      </flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="2"
                  title="填写"
                  is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="3"
                  title="复核"
                  is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="4"
                  title="提交"
                  is-done></flow-state>
      <flow-line :is-done="isdone"></flow-line>
      <flow-state state="5"
                  title="服务台确认"
                  :is-done="isdone"></flow-state>
      <flow-line :is-done="isdone"></flow-line>
      <flow-state state="6"
                  title="完成"
                  :is-done="isdone"></flow-state>
    </flow>
    <group class="box">
      <x-input disabled
               :value="tips"
               :class="tips == '您已注册成功！' ? 'fontSize-15' : 'tips'"
               style="height: 10px;"></x-input>
      <x-input v-for="(input,index) in group"
               :key="index"
               disabled
               label-width="120px"
               :title="input.title"
               :placeholder="input.placeholder"
               :value="input.value"></x-input>
      <x-textarea title="家庭住址"
                  readonly
                  autosize
                  class="ellipsis"
                  :value="address"></x-textarea>
    </group>
    <div class="join">
      <p>三月软件，大学生自己的团队，一群IT时代的精英</p>
      <grid>
        <grid-item label="三月软件公众号"
                   class="chat-img">
          <img slot="icon"
               class="aa"
               src="../../static/img/wx-code.png"
               alt="weChat">
        </grid-item>
        <grid-item label="三月软件QQ招新群"
                   class="chat-img">
          <img slot="icon"
               src="../../static/img/qq_qrcode.jpg"
               alt="qqChat">
        </grid-item>
      </grid>
    </div>
    <x-button style="background: rgb(57, 147, 236); color: #fff; margin: auto; display: block;font-size:18px;letter-spacing: 2px;"
              mini
              @click.native="$router.push('/students/stuMap')">查看学校地图</x-button>
    <p class="copyright">技术支持&copy;三月软件小组</p>
    <toast v-model="showmsg"
           type="warn">{{msg}}</toast>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isdone: false,
      group: [
        {
          title: "姓名",
          placeholder: "",
          value: ""
        },
        {
          title: "身份证号",
          placeholder: "",
          value: ""
        },
        {
          title: "性别",
          placeholder: "",
          value: ""
        },
        {
          title: "政治面貌",
          placeholder: "",
          value: ""
        },
        {
          title: "班级",
          placeholder: "",
          value: ""
        },
        {
          title: "宿舍",
          placeholder: "",
          value: ""
        },
        {
          title: "辅导员姓名",
          placeholder: "",
          value: ""
        },
        {
          title: "辅导员手机号",
          placeholder: "",
          value: ""
        },
        {
          title: "微信号",
          placeholder: "",
          value: ""
        },
        {
          title: "QQ号",
          placeholder: "",
          value: ""
        },
        {
          title: "联系方式",
          placeholder: "",
          value: ""
        }
      ],
      showmsg: false,
      msg: "",
      address: "",
      tips: "信息提交成功，请前往服务台确认注册！",
      regheader: "请到服务台确认"
    };
  },
  mounted() {
    this.axios({
      method: "post",
      url: "/student/selPersonInfo"
    })
      .then(res => {
        let _this = this;
        if (res.data.code == 0) {
          let result = res.data.result;
          let dormitory = window.local;
          _this.group[0].value = result.name;
          _this.group[1].value = result.card_id;
          _this.group[2].value = result.sex;
          _this.group[3].value = result.polApp;
          _this.group[4].value = result.classes;
          _this.group[5].value = result.dorHouse;
          _this.group[6].value = result.counselor_name;
          _this.group[7].value = result.counselor_num;
          _this.group[8].value = result.wechat_id;
          _this.group[9].value = result.qq_id;
          _this.group[10].value = result.phone_num;
          _this.address = result.address;
          _this.tips =
            result.conStatus == 1
              ? "您已注册成功！"
              : "信息提交成功，请到服务台确认注册！";
          _this.isdone = result.conStatus == 1 ? true : false;
          _this.regheader =
            result.conStatus == 1 ? "注册完成" : "请到服务台确认";
        } else if (res.data.code == 2) {
          _this.msg = res.data.msg;
          _this.showmsg = true;
          _this.$router.push("/students/register");
        }
      })
      .catch(error => {
        this.$router.push("/students/register");
      });
  }
};
</script>

<style lang="less" scoped>
.ellipsis /deep/ .weui-label {
  width: 120px !important;
}
.ellipsis /deep/ .weui-textarea {
  color: #888;
}
.wrap {
  position: relative;
  padding-bottom: 60px;
  background: linear-gradient(#fff, #afd0e4);
}

header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.box {
  margin: 0 15px;
  box-shadow: 0px 5px 18px #b3acac87;
  div {
    padding: 15px;
    color: rgb(102, 102, 102);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.join {
  width: 100%;
  margin-top: 5%;
}

.join p {
  text-align: center;
  width: 100%;
  font-size: 15px;
}

.chat-img /deep/ .weui-grid__icon {
  width: 80px;
  height: 80px;
}

.chat-img /deep/ .weui-grid__label {
  color: #333;
  font-size: 11px;
}
.copyright {
  font-size: 11px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tips /deep/ .weui-input {
  content: "\273d";
  -webkit-text-fill-color: red !important;
  font-size: 15px;
}
.fontSize-15 /deep/ .weui-input {
  font-size: 15px;
}
.weui-wepay-flow,
.weui-wepay-flow-auto {
  padding: 18px 25px 23px;
}
</style>

